import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import md5 from "js-md5";
import { loginApi } from "@/api/modules/login";
import { UserOutlined, UnlockOutlined, LockOutlined, CloseCircleOutlined } from "@ant-design/icons";
import { Button, Form, Input, message } from "antd";
import { HOME_URL } from "@/config/config";
import { connect } from "react-redux";
import { setTabsList } from "@/redux/modules/tabs/action";
import { setToken, setUserInfo } from "@/redux/modules/global/action";
import { setUseName } from "@/redux/modules/useInfo/action";
const LoginForm = (props: any) => {
	const [passwordVisible, setPasswordVisible] = useState(false);
	const [form] = Form.useForm();
	const navigate = useNavigate();
	const { setToken, setTabsList, setUseName, setUserInfo } = props;
	const [loading, setLoading] = useState(false);
	const [messageApi, contextHolder] = message.useMessage();
	//登录表单校验成功后提交
	const onFinish = async (loginForm: any) => {
		try {
			console.log("Received values of form: ", loginForm);
			setLoading(true);
			//密码MD5加密
			loginForm.password = md5(loginForm.password);
			const { data } = await loginApi(loginForm);
			setToken(data?.access_token);
			// 清空tabsList
			setTabsList([]);
			messageApi.open({
				type: "success",
				content: "登录成功！！"
			});
			//将用户信息存入redux
			setUseName(loginForm.username);
			setUserInfo(loginForm.username);
			navigate(HOME_URL);
			//跳转至首页
		} catch (error) {
			console.log("error:", error);
		} finally {
			setLoading(false);
		}
	};
	//登录表单校验失败后提示
	const onFinishFailed = (errorInfo: any) => {
		console.log("Failed:", errorInfo);
	};
	const onReset = () => {
		form.resetFields();
	};
	return (
		<>
			{contextHolder}
			<Form
				initialValues={{ username: "admin", password: "123456" }}
				name="basic"
				form={form}
				labelCol={{
					span: 5
				}}
				onFinish={onFinish}
				onFinishFailed={onFinishFailed}
				size="large"
				autoComplete="off"
			>
				<Form.Item
					label=""
					name="username"
					rules={[
						{
							required: true,
							message: "请输入用户名!"
						}
					]}
				>
					<Input placeholder="用户名：admin / user" prefix={<UserOutlined />} />
				</Form.Item>

				<Form.Item
					label=""
					name="password"
					rules={[
						{
							required: true,
							message: "请输入密码!"
						}
					]}
				>
					<Input.Password
						autoComplete="new-password"
						placeholder="密码：123456"
						prefix={passwordVisible ? <UnlockOutlined /> : <LockOutlined />}
						visibilityToggle={{
							visible: passwordVisible,
							onVisibleChange: setPasswordVisible
						}}
					/>
				</Form.Item>

				<Form.Item className="login-btn">
					<Button htmlType="button" onClick={onReset} icon={<CloseCircleOutlined />}>
						重 置
					</Button>
					<Button type="primary" htmlType="submit" loading={loading} icon={<UserOutlined />}>
						登 录
					</Button>
				</Form.Item>
			</Form>
		</>
	);
};
const mapStateToProps = (state: any) => {
	return {
		...state.useInfo,
		...state.global
	};
};
console.log(mapStateToProps);
const mapDispatchToProps = { setToken, setTabsList, setUseName, setUserInfo };
export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);
